<!DOCTYPE html>  
<html lang="en">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> 
<head>  
	<style>
    html{   
    width: 100%;   
    height: 100%;   
    overflow: hidden;   
    font-style: sans-serif;   
	}   
	body{   
    	width: 100%;   
	    height: 100%;   
    	font-family: 'Open Sans',sans-serif;   
    	margin: 0;   
    	background-color: #4A374A;   
	}   
	#login{   
    	position: absolute;   
    	top: 50%;   
    	left:50%;   
    	margin: -150px 0 0 -150px;   
    	width: 300px;   
    	height: 300px;   
	}   
	#login h1{   
    	color: #fff;   
    	text-shadow:0 0 10px;   
    	letter-spacing: 1px;   
    	text-align: center;   
	}   
	h1{   
    	font-size: 2em;   
    	margin: 0.67em 0;   
	}   
	input{   
    	width: 278px;   
    	height: 18px;   
    	margin-bottom: 10px;   
    	outline: none;   
    	padding: 10px;   
    	font-size: 13px;   
    	color: #fff;   
    	text-shadow:1px 1px 1px;   
    	border-top: 1px solid #312E3D;   
    	border-left: 1px solid #312E3D;   
    	border-right: 1px solid #312E3D;   
    	border-bottom: 1px solid #56536A;   
    	border-radius: 4px;   
    	background-color: #2D2D3F;   
	}   
	.but{   
   		width: 300px;   
    	min-height: 20px;   
    	display: block;   
    	background-color: #4a77d4;   
    	border: 1px solid #3762bc;   
    	color: #fff;   
    	padding: 9px 14px;   
    	font-size: 15px;   
    	line-height: normal;   
    	border-radius: 5px;   
    	margin: 0;   
	}  
    </style>
    <meta charset="UTF-8">  
    <title>Login</title>  
    
</head>  
<body>  
    <div id="login">  
        <h1>Login</h1>   
            <input type="number" required="required" placeholder="id" id="u" name="id"></input>  
            <input type="password" required="required" placeholder="password" id="p" name="password"></input>  
			<select id="role">
				<option value="patient">Patient</option>
				<option value="doctor">Doctor</option>
			</select>
            <button class="but" type="submit" onclick="login()">Login</button>  
        
		<br>
		<button class="but" type="submit" onclick="dregist()">Regist</button>
		<!-- <form action="/Registration/" method="POST">  
            <button class="but" type="submit">Regist</button>  
        </form>  -->
    </div>  
</body>  
<script>
	function login(){
		console.log($("#role").val())
		if ($("#role").val() == "doctor"){
			loginDoctor()
		}
		else{
			loginPatient()
		}
	}
	function loginDoctor(){
		$.ajax({
            url: "/Login/loginDoctor", 
            type: "POST",  
            data: { "u": $("#u").val(),
                    "p": $("#p").val()},
            success: function (result) {
                if (result.message == "success!") {
                    location.href="/Doctor"
					
                }
                else {
                    alert("Wrong id or password")
					location.reload()
                }
            }
        });
	}
	function loginPatient(){
		$.ajax({
            url: "/Login/loginPatient", 
            type: "POST",  
            data: { "u": $("#u").val(),
                    "p": $("#p").val()},
            success: function (result) {
                if (result.message == "success!") {
                    location.href="/VitalSigns"
                }
                else {
                    alert("Wrong id or password")
					location.reload()
                }
            }
        });
	}
	function dregist(){
		console.log($("#role").val())
		if ($("#role").val() == "doctor"){
			registDoctor()
		}
		else{
			registPatient()
		}
	}
	function registDoctor(){
		location.href="/Registration/doctor"
	}
	function registPatient(){
		location.href="/Registration"
	}
</script>
</html>